<template>
  <div class="code-contaienr">
    <div class="playground">
      <slot></slot>
    </div>
    <div class="tools">
      <img :src="code" @click="()=>showCode=!showCode"/>
    </div>
    <slot name="code" v-if="showCode"></slot>
  </div>
</template>
<script setup lang="ts">
import code from '@/assets/images/code.png'
import { ref } from 'vue'
const showCode = ref(false)

</script>

<style lang="scss">
.code-contaienr{
  border: 1px solid #f1f1f1;
  border-radius: 4px;
  margin-top: 10px;
  margin-bottom: 20px;
  .shiki{margin-bottom: 0;}
  .tools{
    border-top: 1px solid #f1f1f1;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    div{padding: 0;margin: 0;}
    img{
      width: 20px;
      height: 20px;
      padding: 10px;
      cursor: pointer;
      &:hover{
        background: #f3f3f3;
      }
    }
  }
  .playground{
    padding:20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>